<template>
	<uni-popup ref="transferPopup"  type="bottom" :safe-area="false" >
		<view class="popup-content d-flex d-c" :style="{height:systemInfo.screenHeight + 'px'}">
			<view :style="{ height: systemInfo.statusBarHeight + 'px' }"></view>
			<view class="content-navigation d-flex d-r a-center j-between">
				<view class="navigation-left d-flex d-r a-center j-center" @tap="close">
				    <image src="/static/center/back.png" class="back"></image>
				</view>
				<text class="navigation-title"></text>
			    <view class="navigation-right">
			    </view>
			</view>
			<view class="top-info d-flex d-r a-center j-between">
				<view class="top-info-left">
					<text class="info-left-name">转账给{{memberInfo?.userName}}</text>
					<text class="info-left-id">ID：{{memberInfo?.userId}}</text>
				</view>
				<view class="top-info-right">
					<userhead
					    :width="100"
					    :height="100"
					    :saveKey="memberInfo?.userId"
					    :isVip="memberInfo?.isVip"
					    :src="memberInfo?.userPhoto"
					/>
				</view>
			</view>
			<view class="bottom-money">
				<text class="money-title">转账金额</text>
				<view class="money-info">
					<view class="money-info-amount d-flex d-r">
						<text class="money-amount-symbol">￥</text>
						<text class="money-amount-input">{{money}}</text>
						<view v-if="showCursor" class="money-amount-cursor"></view>
					</view>
					
					<view class="money-info-button d-flex d-r">
						<text class="money-info-remark">{{remarkShow}}</text>
						<text @tap="showRemarkPopup" class="info-button-add">{{remarkShow==''?'添加转账说明':'修改'}}</text>
					</view>
				</view>
				
				<view class="popup-keyboard">
					<view class="edit-keyboard d-flex d-r j-between wrap">
						<text @touchstart.stop="count('1')" class="edit-keyboard-button">1</text>
						<text @touchstart.stop="count('2')" class="edit-keyboard-button">2</text>
						<text @touchstart.stop="count('3')" class="edit-keyboard-button">3</text>
						<text @touchstart.stop="count('4')" class="edit-keyboard-button">4</text>
						<text @touchstart.stop="count('5')" class="edit-keyboard-button">5</text>
						<text @touchstart.stop="count('6')" class="edit-keyboard-button">6</text>
						<text @touchstart.stop="count('7')" class="edit-keyboard-button">7</text>
						<text @touchstart.stop="count('8')" class="edit-keyboard-button">8</text>
						<text @touchstart.stop="count('9')" class="edit-keyboard-button">9</text>
						<text @touchstart.stop="count('.')" class="edit-keyboard-button">.</text>
						<text @touchstart.stop="count('0')" class="edit-keyboard-button">0</text>
						<view @touchstart.stop="count('del')" class="edit-keyboard-button d-flex a-center j-center">
							<image class="keyboard-button-image" src="@/static/image/keyboard-del.png"></image>
						</view>
					</view>
					<view style="height: 60rpx;"></view>
					<tm-button
						_style="margin: 0 auto;font-weight: 600;"
						:width="630"
						:height="80"
						:shadow="-1"
						:round="5"
						:linear-color="['#64F1C5', '#29DBA3']"
						linear="left"
						:fontSize="32"
						fontColor="#ffffff"
						label="转账"
						@tap="confirmPayment"
					></tm-button>
				</view>
			</view>
		</view>
	</uni-popup>
	<uni-popup ref="remarkPopup" @change="changePopup" type="bottom" :safe-area="false" >
		<view class="popup-remark" :style="{transform: 'translateY(-'+ keyBoardHeight +'px)'}">
			<text class="remark-title">转账说明</text>
			<view class="remark-input">
				<input ref="inputRef" :adjust-position="false" v-model="remarkInput" class="remark-input-input" placeholder="收付款双方可见,最多10个字"/>
			</view>
			<view class="remark-button d-flex d-r j-between">
				<tm-button :width="180" :round="5" :height="80" :shadow="-1"
				    linear="left" :fontSize="32" :outlined="true" color="#1DC691" @tap="remarkPopup.close"
				    label="取消"></tm-button>
				<tm-button :width="180" :round="5" :height="80" :shadow="-1"
				    :linear-color="['#64F1C5', '#29DBA3']" linear="left" :fontSize="32" fontColor="#ffffff" @tap="confirmRemarks"
				    label="确认"></tm-button>
			</view>
		</view>
	</uni-popup>
	<confirmPay ref="confirmPopup" @confirmPay="onPay"></confirmPay>
</template>

<script setup lang="tsx">
	
import { ref,nextTick } from 'vue';
import { onLoad, onUnload } from "@dcloudio/uni-app";
import { systemInfo as systemInfoStore } from "@/store/systemInfo";
import userhead from "@/components/userhead.vue";
import confirmPay from "@/components/confirmPay.vue";
import { userData as userDataStore } from "@/store/userData";
import { sendGroupTransfer } from "@/api/api";
import BigNumber from "bignumber.js";

const showCursor = ref(false);
let intervalId: any = null
onLoad(() => {
	intervalId = setInterval(() => {  
	   showCursor.value = !showCursor.value
	   
	}, 500);
})
onUnload(() => {
	clearInterval(intervalId);
})
const keyBoardHeight = ref(0);
const changePopup = (e:any) => {
	if(e.show){
		/* #ifndef H5 */
		nextTick(()=>{
			uni.onKeyboardHeightChange(res => {
				keyBoardHeight.value = res.height;
			})
		})
		
		/*#endif*/
	}else{
		inputRef.value.blur()
		/* #ifndef H5 */
		nextTick(()=>{
			uni.offKeyboardHeightChange(); 
		})
		/*#endif*/
	}
}

const userData: any = userDataStore();
const systemInfo: any = systemInfoStore();
const transferPopup = ref()
const memberInfo:any = ref()
const groupId = ref()
const remarkInput = ref('')
const remarkShow = ref('')
const open = (id:string,member:any) => {
	groupId.value = id
	memberInfo.value = member
	money.value = ''
	remarkInput.value = ''
	remarkShow.value = ''
	transferPopup.value.open()
}
const close = () => {
	transferPopup.value.close()
}
const money = ref('')
const count = (str:string) => {
	if(str!=="del"){
		if(str==="."){
			if(money.value.indexOf(".")===-1){
				if(money.value == ''){
					money.value += '0'+str
				}else{
					money.value += str
				}
				//money.value += str
			}
		}else{
			let a = money.value + str;
			let array  = a.split(".")
			if(array.length<=1||array[1].length<=2){
				if(Number(a)>99999999){
					uni.showToast({
					    icon: "none",
					    title: '最大金额99999999',
					    duration: 1500,
					});
				}else{
					money.value += str
				}
			}
		}
	}else{
		money.value = money.value.toString().slice(0, -1);
	}
}
//         调起支付  
const confirmPopup = ref()
const confirmPayment = () => {3
	//如果未设置支付密码，跳转到支付密码设置
	if(!userData.isPayPwd){
		uni.navigateTo({
			url:`/pages/setPayPwd/setPayPwd`,
			success:() => {
				uni.showToast({
					title:'请先设置支付密码',
					icon:'none',
					duration:1500
				})
			}
		});
		return
	}
   if(money.value==''){
   	   uni.showToast({
   			title:'请输入转账金额',
   			icon:'none',
   			duration:1500
   	   })
   	   return
   }
   if(isNaN(parseFloat(money.value))){
   	   uni.showToast({
   			title:'输入有误',
   			icon:'none',
   			duration:1500
   	   })
   	   return
   }
   confirmPopup.value.open()
}
let loadSend = false
const onPay = (payPwd:string) => {
	confirmPopup.value.close()
	let param:any = {
			userId:userData.id,
			groupId:groupId.value,
			amount:new BigNumber(money.value).multipliedBy(new BigNumber(100)).toNumber(),
			directUserId:memberInfo.value.userId,
			payPwd:payPwd,
			remark:remarkShow.value
	}
	if(loadSend)return
	loadSend = true
	sendGroupTransfer(param).then((res:any) => {
		loadSend = false
		if(res.success){
			uni.$emit("onSendButton");
			uni.$emit("toBottom");
			//close()
			uni.showToast({
				title:"转账成功",
				icon:'none',
				duration:1500,
				success: () => {
					transferPopup.value.close()
				}
			})
		}else{
			uni.showToast({
				title:res.message,
				icon:'none',
				duration:1500
			})
		}
	}).catch((error:any) => {  
		loadSend = false
	});
}
const remarkPopup = ref()
const showRemarkPopup = () => {
	remarkInput.value = remarkShow.value
	remarkPopup.value.open()
}
const inputRef = ref()
const confirmRemarks = () => {
	if(remarkInput.value.length>10){
		uni.showToast({
			title:'最多10个字符',
			icon:'none',
			duration:1500
		})
		return
	}
	remarkShow.value = remarkInput.value
	remarkPopup.value.close()
}
defineExpose({
  open,
  close
});
</script>

<style lang="scss" scoped>
.popup-content{
	border-radius: 0;
	background-color: #f5f5f5;
	.content-navigation{
		height: 100rpx;
		.navigation-left{
			width: 108rpx;
			height: 100rpx;
			.back{
				width: 48rpx;
				height: 48rpx;
			}
		}
		.navigation-title{
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 34rpx;
			color: #000000;
		}
		.navigation-right{
			width: 108rpx;
			height: 100rpx;
		}
	}
	.top-info{
		padding: 40rpx 70rpx;
		.info-left-name{
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: #333333;
		}
		.info-left-id{
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
		}
	}
	.bottom-money{
		flex: 1;
		background-color: #ffffff;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		position: relative;
		.money-title{
			padding-top: 70rpx;
			padding-left: 70rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #666666;
		}
		.money-info{
			padding: 30rpx 70rpx 0 70rpx;
			.money-info-amount{
				padding-bottom: 10rpx;
				border-bottom: 1rpx solid #E4E4E4;
				.money-amount-symbol{
					font-family: 'din',DINAlternate-Bold, DINAlternate;
					font-weight: bold;
					font-size: 70rpx;
					color: #333333;
				}
				.money-amount-input{
					padding-left: 10rpx;
					height: 74rpx;
					font-family: 'din',DINAlternate-Bold, DINAlternate;
					font-weight: bold;
					font-size: 70rpx;
					color: #333333;
				}
				.money-amount-cursor{
					width: 5rpx;
					background-color: #1DC691;
				}
			}
			.money-info-button{
				padding-top: 40rpx;
				.money-info-remark{
					padding-right: 10rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
				}
				.info-button-add{
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #1DC691;
				}
				
			}
		}
		.popup-keyboard{
			width: 750rpx;
			padding: 60rpx 50rpx 60rpx 50rpx;
			position: absolute;
			left: 0;
			bottom: 0;
			.edit-keyboard{
				width: 650rpx;
				.edit-keyboard-button{
					width: 210rpx;
					height: 100rpx;
					font-size: 40rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #333333;
					line-height: 100rpx;
					text-align: center;
					.keyboard-button-image{
						width: 50rpx;
						height: 50rpx;
					}
				}
				.edit-keyboard-button:active {  
				  background-color: rgba(0, 0, 0, 0.1);
				  border-radius: 10rpx;
				}
			}
			.confirm-button{
				padding: 40rpx 0;
			}
		}
	}
}
.popup-remark{
	background-color: #ffffff;
	border-radius: 40rpx 40rpx 0rpx 0rpx;
	transform: translateY(0);
	transition: transform 0.3s ease;
	.remark-title{
		height: 80rpx;
		line-height: 80rpx;
		padding-left: 40rpx;
		
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
	}
	.remark-input{
		padding: 20rpx 60rpx;
		.remark-input-input{
			padding-left: 20rpx;
			height: 80rpx;
			line-height: 80rpx;
			background-color: #f5f5f5;
			border-radius: 20rpx;
			
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #666666;
		}
		
	}
	.remark-button{
		padding: 60rpx 180rpx 120rpx 180rpx;
	}
}
/*     公共属性     */
.psr {
    position: relative;
}

.psa {
    position: absolute;
}

.center {
    text-align: center;
}

.bold {
    font-weight: bold;
}


.a-center {
    align-items: center;
}

.j-center{
    justify-content: center;
}

.j-between {
    justify-content: space-between;
}

.j-around {
    justify-content: space-around;
}


.d-flex {
    display: flex;
}

.d-c {
    flex-direction: column;
    
}
.d-r {
    flex-direction: row !important;
}

.j-end {
    justify-content: flex-end;
}


.wrap {
    flex-wrap: wrap;
}

.nowrap {
    flex-wrap: nowrap;
}

.uline{
    text-decoration: underline;
}

.c_main{
    color:$slim-main;
}

.b_main{
    background-color:$slim-main;
}

</style>